<template>
	<view>
		<view class="tabs">
			<u-tabs
				:list="list2"
				@click="tabs_click2"
						:scrollable="false"
				lineColor="#333"
				:inactiveStyle="{
					color: '##626262',
					transform: 'scale(1)',
					FontSize:'30rpx'
				}"
				:activeStyle="{
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					FontSize:'30rpx'
					
				}"
				lineHeight="2"
				lineWidth="18"
			></u-tabs>
		</view>
		<view class="tabs">
			<u-tabs
				:list="list1"
				@click="tabs_click"
						:scrollable="false"
				lineColor="#333"
				:inactiveStyle="{
					color: '##626262',
					transform: 'scale(1)',
					FontSize:'30rpx'
				}"
				:activeStyle="{
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					FontSize:'30rpx'
					
				}"
				lineHeight="2"
				lineWidth="18"
			></u-tabs>
		</view>
		
		 <scroll-view scroll-y="true"  class="scroll":style="{height:scrollH+'px'}">
		 	<view class="list" v-for="(item, index) in list" :key="index">
				<view class="list_item">
					<view class="list_item_top flex">
						<view class="list_item_top_left flex1">
							<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/order_icon.png" class="list_item_top_left_img" mode=""></image>
							<view class="list_item_top_left_text">
								线上名医
							</view>
						</view>
						<view class="list_item_top_right">
							等待付款
						</view>
						<view class="list_item_top_right" style="color: #D95858;">
							待发货
						</view>
						<view class="list_item_top_right" style="color: #D95858;">
							待收货
						</view>
						<view class="list_item_top_right" style="color: #D95858;">
							交易完成
						</view>
						<view class="list_item_top_right" style="color: #262626;">
							订单完成
						</view>
					</view>
					<view class="list_item_min">
						<view class="list_item_min_orderno">
							订单编号：{{item.express_no}}
						</view>
						<view class="list_item_min_flex flex">
							<image src="" class="list_item_min_flex_img" mode=""></image>
							<view class="list_item_min_flex_right">
								<view class="list_item_min_flex_right_top line-2">
									Fitbit Inspire 2 健康健身追踪器,带免费 1 年高级试用,24/7 心率和长达 10 天电池
								</view>
								<view class="lable flex1">
									<view class="lable_item">
										红色
									</view>
								</view>
								<view class="flex" style="margin-top: 8rpx;">
									<view class="prce">
										{{item.score}}积分+{{item.amount}}元
									</view>
									<view class="num">
										x1
									</view>
								</view>
							</view>
						</view>
						<view class="order_list_bottom flex1">
							<view class="order_list_bottom_btn fukuan">
								付款
							</view>
							<view class="order_list_bottom_btn">
								取消
							</view>
							<view class="order_list_bottom_btn">
								查看详情
							</view>
							<view class="order_list_bottom_btn fukuan">
								确认收货 
							</view>
							<view class="order_list_bottom_btn">
								查看物流
							</view>
							<view class="order_list_bottom_btn" @click="go_pingjia">
								评价订单
							</view>
							<view class="order_list_bottom_btn">
								删除记录
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;" v-if="list.length == 0">
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>
		 </scroll-view>
	</view>
</template>

<script>
	import { goods_order } from '../../api/common.js';
	import getScrollHeight from "@/utils/utils.js"
	export default {
		data() {
			return {
				list2:[
					{
						id:1,
						name: '商城订单'
					},
					{
						id:2,
						name: '积分订单'
					}
				],
				status2:1,//
				list1: [
					{
						name: '全部'
					},
					{
						name: '待付款'
					},
					{
						name: '待发货'
					},
					{
						name: '待收货'
					},
					{
						name: '待评价'
					}
				],
				scrollH:'',
				page:1,
				last_page:1,
				list:[],
			}
		},
		onReady() {
			let t = this
			getScrollHeight.getScrollHeight('scroll').then(res=>{
				t.scrollH = res - 10
			})	
		},
		onShow() {
			this.getList();
		},
		methods: {
			getList(){
				if(this.status2==1){
					// 商城订单
					goods_order().then(res=>{
						if(res.code == 200001){
							this.list = res.data.data;
						}
					})
				}else if(this.status2==2){
					// 积分商城订单
				}
			},
			go_pingjia(){
				uni.navigateTo({
					url:'/pages/Evaluate/Evaluate'
				})
			},
			tabs_click(e){
				if(this.status==e.id){
					return;
				}
				this.status = e.id;
			},
			tabs_click2(e){
				if(this.status2==e.id){
					return;
				}
				this.status2 = e.id;
			},
		}
	}
</script>

<style>
page{
	background: #F4F4F4;
}
.tabs{
	background: #fff;
}
.list_item:first-child{
	margin-top:0;
}
.list_item{
	width: 750rpx;
	height: 408rpx;
	margin-top: 22rpx;
	background: #fff;
	padding: 30rpx;
	box-sizing: border-box;
}
.flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex1{
	display: flex;
	align-items: center;
}
.list_item_top_left_img{
	width: 34rpx;
	height: 34rpx;
}
.list_item_top_left_text{
	height: 34rpx;
	line-height: 34rpx;
	color: #262626;
	font-family: Source Han Sans SC;
	font-size: 22rpx;
	font-weight: 400;
	margin-left: 4rpx;
}
.list_item_top_right{
	height: 34rpx;
	line-height: 34rpx;
	color:  #F4895E;
	text-align: right;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
}
.list_item_min_orderno{
	color:#626262;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 20rpx;
	font-weight: 400;
}
.list_item_min_flex{
	margin-top: 14rpx;
}
.list_item_min_flex_img{
	width: 176rpx;
	height: 176rpx;
	border-radius: 12rpx;
	background: #ccc;
}
.list_item_min_flex_right{
	width: calc(100% - 196rpx);
}
.list_item_min_flex_right_top{
	height: 72rpx;
	color: #262626;
	font-family: Source Han Sans CN;
	font-size: 24rpx;
	font-weight: 400;
}
.lable{
	width: 100%;
}
.lable_item{
	display: inline-flex;
	height: 44rpx;
	line-height: 44rpx;
	padding: 0rpx 12rpx;
	border-radius: 4rpx;
	color: #262626;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 20rpx;
	font-weight: 400;
	border: 1rpx solid #626262;
	margin-top: 10rpx;
}
.prce{
	color: #E5432E;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 28rpx;
	font-weight: 400;
}
.num{
	color: #000;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 22rpx;
	font-weight: 400;
}
.order_list_bottom{
	flex-direction: row-reverse;
	padding-top: 20rpx;
	border-top: 1rpx solid #F4F4F4;
	margin-top: 32rpx;
	flex-wrap: wrap;
}
.order_list_bottom_btn{
	display: inline-flex;
	padding: 12rpx 40rpx;
	border-radius: 60rpx;
	border: 0.5px solid #CCC;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
	margin-left: 20rpx;
}
.fukuan{
	background-color: #0165FB;
	color: #FFF;
}
.scroll{
	margin-top: 22rpx;
}
</style>
